<template>
	<div class="page breakfast">
		<x-header class='header' slot="header" :left-options="{backText: ''}">早餐详情</x-header>
		<div class="top" style="height: 50px; width: 100%;"></div>
		
		<view-box class='viewbox'>
			<group :title='title' title-color='rgb(102,102,102)'>
				<cell :value="foodCategoryData.stapleFood">
					<span slot="title" class="ospan">主食类（{{foodCategoryData.stapleFoodDose}}）</span>
				</cell>
				<cell :value="foodCategoryData.proteinFood">
					<span slot="title" class="ospan">肉蛋白类（{{foodCategoryData.proteinFoodDose}}）</span>
				</cell>
				<cell :value="foodCategoryData.vegetableFood">
					<span slot="title" class="ospan">蔬菜类（{{foodCategoryData.vegetableFoodDose}}）</span>
				</cell>
				<cell :value="foodCategoryData.milkFood">
					<span slot="title" class="ospan">奶类（{{foodCategoryData.milkFoodDose}}）</span>
				</cell>
				<cell :value="foodCategoryData.fruitFood">
					<span slot="title" class="ospan">水果类（{{foodCategoryData.fruitFoodDose}}）</span>
				</cell>
				<cell :value="foodCategoryData.oilDose">
					<span slot="title" class="ospan">植物油（ml）</span>
				</cell>
				<cell :value="foodCategoryData.saltDose">
					<span slot="title" class="ospan">食盐（g）</span>
				</cell>
			</group>
			<group :title='title2' title-color='rgb(102,102,102)'>
				<cell :value="not_recommend_food.sugarManyFood">
					<span slot="title" class="ospan">高升糖指数食品</span>
				</cell>
				<cell :value="not_recommend_food.sugarManyFruit">
					<span slot="title" class="ospan">高升糖指数水果</span>
				</cell>
				<cell :value="not_recommend_food.saltManyFood">
					<span slot="title" class="ospan">高盐食品</span>
				</cell>
				<cell :value="not_recommend_food.cholesterolManyFood">
					<span slot="title" class="ospan">高胆固醇食品</span>
				</cell>
				<cell :value="not_recommend_food.oilFood">
					<span slot="title" class="ospan">油炸食品</span>
				</cell>
				<cell :value="not_recommend_food.otherFood">
					<span slot="title" class="ospan">其他加工食品</span>
				</cell>
				<cell :value="not_recommend_food.purineManyFood">
					<span slot="title" class="ospan">高嘌呤食物</span>
				</cell>
			</group>
		</view-box>
	</div>
</template>

<script>
	import Api from '@/api/index.js' //  引入api文件
	export default {
		data() {
			return {
				customer_id: '',
				title: '请在健康管理师的指导下选择适合您的食物，进行合理的膳食安排',
				title2: '尽量少选的食物',
				foodCategoryData: {
					
				},
				not_recommend_food: {
					
				}
			}
		},
		created(){
			this.customer_id = localStorage.getItem('customer_id')
			this.getData()
		},
		methods: {
			// 获取数据
			getData() {
				this.$http.get(Api.food_detailApi + this.customer_id)     //  饮食指导的早餐
					.then(({data}) => {
						this.foodCategoryData = data.data[0]
					})
					.catch((err) => {
						console.log(err)
					})
				this.$http.get(Api.not_recommend_foodApi + this.customer_id)    //  少选的的食物
					.then(({data}) => {
						this.not_recommend_food = data.data;
//						console.log(this.not_recommend_food)
					})
					.catch((err) => {
						console.log(err)
					})
			}
		}
	}
</script>

<style lang="less" scoped>
	.breakfast {
		position: fixed !important;
		left: 0;
		top: 0;
		right: 0;
		background: #fff;
		z-index: 999;
		width: 100%;
		height: 100%;
		overflow: hidden;
		.viewbox {
			background-color: #f8f8f8;
			padding-bottom: 40px;
			.ospan {
				color: rgb(58, 175, 252);
			}
		}
	}
</style>